<template>
    <el-dialog class="jzb-dialog" :title="title" :visible.sync="visibleDialog" :width="width" id="dept-dialog-choose" :close-on-click-modal="false" append-to-body v-dialogDrag>
        <el-container class="mainer">
            <el-aside width="300px" class="jzb-area">
                <div class="hd">职位列表</div>
                <div class="hdflex h40"><el-input placeholder="搜索职位关键字" v-model="filterDataText" size="mini"></el-input></div>
                <div class="bd">
                    <el-tree :data="dutyTreeList" :props="dataProps" ref="dataTree" show-checkbox @check-change="changeData" :check-on-click-node="true" 
                        node-key="id" :default-expanded-keys="['all']" :filter-node-method="filterDataNode"></el-tree>
                </div>
            </el-aside>
            <el-main class="jzb-colflex">
                <div class="hd">已选职位（{{choosedList.length}}）</div>
                <div class="bd pl-10 pr-10">
                    <el-tag-group v-model="choosedList" :isGroup="false" @change="setDataCheckedKeys" labelName="name" valueName="id"></el-tag-group>
                </div>
            </el-main>
        </el-container>
        <el-footer height="auto" class="jzb-dialog-footer" slot="footer">
            <div class="content">已选职位：{{choosedList.length}}</div>
            <button type="button" class="jzb-button" @click="saveData"><span class="icon icon-ok"></span>保 存</button>
            <button type="button" class="jzb-button" @click="visibleDialog = false"><span class="icon icon-undo"></span>取 消</button>
        </el-footer>
    </el-dialog>
</template>
<script>
/** 组件功能：从本单位选择职位列表
* 传入：props
* 输出：somelist
*/
import _ from 'lodash';
import elTagGroup from '@/components/public/el-tag-group.vue';
import {GetRequestParams,toJson} from "@/utils/utils.js";
import {duty} from "@/api/org.js";
export default {
    name:'com-choose-duty',
    components: {
        elTagGroup,
    },
    props:{
        // 配置项
        comId:{ type: String, default: '' }, //单位ID
        title:{ type: String, default: '选择职位' }, //对话框title
        visible:{ type: Boolean, default: false }, //对话框显示
        ifInit:{ type: Boolean, default: false }, //是否初始化本单位信息
        width:{ type: String, default: '800px' }, //对话框宽度
        value:{ type: Array, default:()=>{return []}}, //用户列表默认选中
        exclude:{ type: Array, default:()=>{return []}}, //可选列表排除
        returnValue:{ type: Boolean, default:false}, //是否必须选中值
    },
    data(){
        return {
            //1.基本
            visibleDialog:false,
            choosedList:[],
            dutyTreeList:[],
            dutyList:[],
            dataList:[],
            dataProps:{
                value:'id',             // ID字段名
                label: 'name',         // 显示名称
                children: 'children'    // 子级字段名
            },
            filterDataText:'',
            urlList:{
                GetDataList: "/org/duty/list",
            },
        };
    },    
    watch:{
        value(val){
            this.dataList = [...val];
        },
        visible(val){
            if(val) this.openComChooseData();
        },
        visibleDialog(val){
            if(!val) this.$emit('close');
        },
        filterDataText(val) {
            this.$refs.dataTree.filter(val.trim());
        },
    },
    mounted(){
        if(this.ifInit){
            this.GetDataList();
        }
    },
    methods:{
        //1.1 组件打开时初始化
        openComChooseData(){
            this.choosedList = [...this.dataList];
            this.visibleDialog = true;
            if(!this.ifInit){
                this.GetDataList();
            }
        },
        //1.2 保存数据
        saveData(){
            if(this.returnValue && this.choosedList.length==0 ){
                this.$layer.msg('请选择职位');
                return;
            }
            this.$emit('input',this.choosedList);
            this.$emit('change',this.choosedList);
            this.visibleDialog = false;
        },
        //2.1 获取数据列表
        GetDataList(){
             let params = {
                comId:this.comId||this.$store.state.comId||GetRequestParams().comid,
                enabled:true,
            }
            duty.list(params).then(res=>{
                if(res.code='30000'){
                    this.dutyList = res.list.map(item=>{
                        return {
                            ...item,
                            comId:this.comId||this.$store.state.comId||GetRequestParams().comid
                        }
                    })
                    this.dutyList=this.dutyList.filter(duty => this.exclude.every(item=>item.id!==duty.id))
                    this.dutyTreeList = [{id:'all',name:'全部',children:this.dutyList}];
                    this.setDataCheckedKeys();
                }
            })
        },
        //2.2 选中事件
        changeData(data, checked, indeterminate){
            //已选列表 choosedList = choosedList - dutyList + checkedList;
            this.choosedList = _.pullAllBy(this.choosedList, this.dutyList, 'id'); 
            this.choosedList = _.uniqBy(_.concat(this.choosedList, this.$refs.dataTree.getCheckedNodes()), 'id'); //+checkedList;并去重
            this.choosedList = this.choosedList.filter(item=>item.id!='all');
        },
        //2.4 设置默认选中值
        setDataCheckedKeys(){
            let keys = [...this.choosedList].map(item=>item.id);
            this.$refs.dataTree.setCheckedKeys(keys);
        },
        //2.5 关键字搜索
        filterDataNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
    },
};
</script>
<style lang="less" scoped>
@import "~@/assets/style/base.css";
@import "~@/assets/style/common.less";
.mainer{min-height:500px;overflow:auto;border:1px solid #ddd;}
</style>